<template>
  <div class="Centerbar">
    <el-button type="info" plain @click="changeTime">{{ $t('radio.week') }}</el-button>
    <dv-loading style="color: aqua" v-if="loading">{{ $t('loading') }}</dv-loading>
    <div ref="app" class="echarts" v-else></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import { getWorkshopDayList } from "@/api/index";
export default {
  data() {
    return {
      xdata: [],
      ydata1: [],
      loading: false,
      screenWidth: document.body.clientWidth,
      screenHeight: document.body.clientHeight,
      myChart: "",
    };
  },

  methods: {
    getRandomInt(min, max) {
      min = Math.ceil(min);
      max = Math.floor(max);
      return Math.floor(Math.random() * (max - min + 1)) + min;
    },
    hoursSinceMidnight() {
      const now = new Date();
      const midnight = new Date();
      midnight.setHours(0, 0, 0, 0); // 将当前日期的时间设置为凌晨12点
      const diff = now - midnight; // 计算两个日期之间的差值（毫秒）
      return Math.floor(diff / 3600000); // 将毫秒转换成小时并取整
    },

    changeTime() {
      let title = this.$t('page3.titleFakeCnc');
      this.$emit("data-child", this.ydata1, this.xdata, title);
    },

    getrequests() {
      // getWorkshopDayList(17).then((res) => {
      //   if (res.code == 200) {
      //     this.xdata = res.data.map((item) => {
      //       return item.equipmentCode;
      //     });
      //     this.ydata1 = res.data.map((item) => {
      //       return item.onTime;
      //     });
      //     this.$nextTick(() => {
      //       this.getdata();
      //     });
      //   }
      // });
      this.xdata = [];
      this.ydata1 = [];
      for (let i = 0; i < 40; i++) {
        this.ydata1.push(
          this.getRandomInt(
            this.hoursSinceMidnight() * 300,
            this.hoursSinceMidnight() * 400
          )
        );
      }

      for (let i = 1; i <= 9; i++) {
        this.xdata.push("A0" + i);
      }
      for (let i = 10; i < 40; i++) {
        this.xdata.push("A" + i);
      }
      this.$nextTick(() => {
        this.getdata();
      });
    },
    getdata() {
      var timer = null;
      let that = this;
      var myChart = echarts.init(this.$refs.app);
      myChart.clear();
      clearInterval(timer);
      this.myChart = myChart;
      var option;
      let dataX = this.xdata;
      option = {
        tooltip: {
          trigger: "axis",
        },
        legend: {},
        grid: {
          left: "-5%%",
          right: "8%",
          bottom: "3%",
          top: "15%",
          containLabel: true,
        },
        xAxis: {
          name: this.$t('radio.xAxis.equipmentCode'),
          type: "category",
          data: dataX,
          nameTextStyle: {
            color: "#a6cac9",
            fontSize: 10,
            padding: [0, 0, 0, -10],
          },
          axisLabel: {
            textStyle: {
              color: "#a6cac9",
              fontSize: 15,
            },
          },
        },
        yAxis: {
          name:this.$t('radio.yAxis.number'),
          type: "value",
          show: false,
          // max: 10000,
        },
        series: [
          {
            type: "bar",
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: "#009DFF" }, // 0% 处的颜色
                { offset: 1, color: "#0245AB" }, // 100% 处的颜色
              ],
              global: false, // 缺省为 false
            },
            data: this.ydata1,
            label: {
              show: true,
              position: "top",
              color: "#009DFF",
              fontSize: 12,
            },
            barWidth: "55%",
          },
        ],
        //自动滚动
        dataZoom: [
          //滑动条
          {
            show: false, //是否显示滑动条
            type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
            startValue: 0, // 从头开始。
            endValue: 9, // 一次性展示5个。
          },
          {
            type: "slider", // 这里可以选择你需要的dataZoom类型
            start: 0, // 滑动条开始位置（百分比）
            end: 100, // 滑动条结束位置（百分比）
          },
        ],
      };
      timer = setInterval(function () {
        // 每次向后滚动一个，最后一个从头开始。
        if (option.dataZoom[0].endValue == dataX.length - 1) {
          option.dataZoom[0].endValue = 9;
          option.dataZoom[0].startValue = 0;
        } else {
          option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
          option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
        }
        myChart.setOption(option, true);
      }, 6500);
      window.addEventListener("resize", () => {
        //使用resize监听方法
        that.screenWidth = document.body.clientWidth;
        window.screenWidth = that.screenWidth;
        that.screenHeight = document.body.clientHeight;
        window.screenHeight = that.screenHeight;
      });
      myChart.clear();
      option && myChart.setOption(option, true);
    },
  },
  mounted() {
    this.getrequests();
    // setInterval(() => {
    //   this.getrequests();
    // }, 3000);
  },
  watch: {
    screenWidth() {
      this.myChart.resize();
    },
    screenHeight() {
      this.myChart.resize();
    },
  },
};
</script>
<style scoped>
.echarts {
  width: 100%;
  height: 38vh;
}
/* @media screen and (min-height: 1920px) {
  .echarts {
    height: 450px;
  }
} */
::v-deep .el-button {
  background: #14304c;
  color: #009dff;
  font-size: 12px !important;
  font-weight: 700;
  width: 60px;
  height: 25px !important;
  text-align: center;
  line-height: 5px;
  border: 1px solid #496a96;
}
.el-button {
  position: absolute;
  margin: -45px 0 0 10px;
}
</style>
